<template>
    <div class=""  v-loading="loading" style="padding-left: 10px;">
        <el-tabs v-model="curTab" >
            <el-tab-pane v-for="(v,i) in tableName" :name="v.id" :label="v.text" >

                <el-table
                        :data="data[i] || []"
                        style="width: 100%"
                        border
                        stripe
                >
                    <el-table-column label="流程ID" prop="id"></el-table-column>
                    <el-table-column label="流程名" prop="bpmName"></el-table-column>
                    <el-table-column label="任务类型" prop="parInsId" >
<!--                        <template slot-scope="scope">-->
<!--                            {{scope.row.parInsId?'子流程':'主流程'}}-->
<!--                        </template>-->
                        <template slot-scope="scope">
                            <font v-if="scope.row.parInsId" style='color:#76caeb'>子流程</font>
                            <font v-if="!scope.row.parInsId">主流程</font>
                        </template>
                    </el-table-column>
                    <el-table-column label="流程状态" prop="state"></el-table-column>
                    <el-table-column label="当前经办人" prop="uName"></el-table-column>
                    <el-table-column label="创建时间" prop="createTime" width="180px"></el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <div class="action">
                                <el-button class="btn" type="text" @click="getDetail(scope.row._id)">查看</el-button>

                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot="header">
                            <el-button icon="el-icon-search" circle type="primary" @click="showSearch"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="padding-top: 10px;padding-bottom: 10px; text-align: right">
                    <el-pagination
                            class="page"
                            @current-change="load(tab)"
                            :current-page.sync="current"
                            :page-size="size"
                            layout="total, prev, pager, next, jumper"
                            :total="Number(total) || 0"
                    ></el-pagination>
                </div>
                <el-drawer
                        title="搜索"
                        :modal="false"
                        :visible.sync="search"
                >
                    <div class="search">
                        <el-form>
                            <el-select v-model="modelId" placeholder="请选择">
                                <el-option-group
                                        v-for="group in options"
                                        :key="group.text"
                                        :label="group.text">
                                    <el-option
                                            v-for="item in group.children"
                                            :key="item.id"
                                            :label="item.text"
                                            :value="item.id">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </el-form>
                        <div style="text-align: center;margin-top: 10px">
                            <el-button icon="el-icon-search" type="primary" @click="changeTable(tab)">搜索</el-button>
                        </div>
                    </div>

                </el-drawer>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script>
    import $ from "jquery";

    export default {
        // name: "WorkBench",
        data(){
            return {
                curTab: "todo",
                tab:"todo",
                current: 1,
               /* page: {
                    list: [],
                    total: 0
                },*/
                data:[],
                total:0,
                size: 10,
                tableName : [{"id":"todo","text":"待处理流程"},{"id":"processed","text":"已处理流程"},{"id":"over","text":"已办结流程"},{"id":"observe","text":"关注的流程"}],
                search: false,
                options:[],
                modelId:"",
                loading:false
            }
        },
        watch:{
            curTab(nv){
                this.changeTable(nv)
            }
        },
        mounted() {
            this.load("todo");
            this.optionsLoad();
        },
        methods:{
            load(type){
                this.loading = true;
                $.get("/workflow/getInsList", {type:type,id:this.modelId,page: this.current, size: this.size}, json => {
                    if(json.success){
                        // this.data = json.data.list || [];
                        this.$set(this.data, 0, json.data.list || [])
                        this.total = json.data.totalRow;

                        this.search = false;
                        this.loading = false;
                    }

                });
            },
            optionsLoad(){
                $.get("/workflow/modelList", json => {
                    this.options = json.data || [];
                });
            },
            getDetail(id){
                window.open("./bpm/ins/ins.pub.html?type=deal&isWork&id=" + id, "dealtask", "left=100, top=100, width=800, height=600");
            },
            changeTable(i){
                this.tab = i;
                this.current = 1;
                // this.load(this.tab);
                this.loading = true;

                var id = (this.tableName.find(e => e.id == this.tab) || {}).id;
                if(!id){
                    return
                }
                var i = this.tableName.findIndex(e => e.id == id);
                $.get("/workflow/getInsList", {type: id,id:this.modelId,page: this.current, size: this.size}).then(json => {
                    if(json.success){
                        this.$set(this.data, i, json.data.list || [])
                        this.total = json.data.totalRow;

                        this.search = false;
                        this.loading = false;
                        console.log("====",this.data)
                    }
                });
            },
            showSearch(){
                this.search = true;
            }
        }
    }
</script>

<style scoped>
    .search{
        padding-left: 10px;
        padding-right: 10px;
    }

</style>